<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消费趋势最大值</title>
    <script src="/js/jquery-1.11.1.js"></script>
    <script src="/js/echarts.min.js"></script>
    <script src="/js/china.js"></script>
    <link rel="stylesheet" href="/css/st.css">
</head>
<body>
<div id="Echarts"></div>
<script>

    var myChart = echarts.init(document.getElementById('Echarts'));
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];





    option = {
        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['2016','2017','2018','2019'],
            textStyle: {
                color: '#fff'
            }
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value',
                min:1500,
                max:1600

            }
        ],
        series:[]
    };
    myChart.setOption(option);
    function getData() {
        $.ajax({
            url: "/findAverCost",
            dataType: "json",
            success: function (data) {
                function GroupBy(arr,key) {
                    var obj = {};
                    for (let i = 0; i <arr.length; i++) {
                        if (obj[arr[i][key]]) {
                            obj[arr[i][key]].push(arr[i]);
                        } else {
                            obj[arr[i][key]] = new Array();
                            obj[arr[i][key]].push(arr[i]);
                        }
                    }
                    return obj;
                }
                console.log(data)
                data=GroupBy(data,"moth")


                var legen=[]
                var data_key=[]
                var data_value=[]
                var val=[]
                for(var key in data){
                    data_key.push(key)
                    data_value.push(data[key])
                }
                for(var i=0;i<data_value[0].length;i++)
                    legen.push(data_value[0][i].stu_grade)
                for (var i=0;i<data_value[0].length;i++){
                    val[i]=new Array()
                    for(var j=0;j<data_value.length;j++){
                        val[i].push(data_value[j][i].cost)
                    }
                }

                console.log(data_key)
                console.log(data_value)
                console.log(legen)
                console.log(val)
                yaxis_series=[]

                for(var i=0;i<legen.length;i++){
                    yaxis_series.push({

                        name: legen[i],
                        type: 'line',
                        barGap: 0,
                        // label: {
                        //     show: true,
                        //     position: 'insideTop',
                        //     formatter:"{c}"
                        // },
                        data: val[i]



                    })
                }
                myChart.setOption({
                    // legend: {
                    //     data: legen
                    // },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {show: false},
                            data:data_key,
                            axisLine:{
                                lineStyle:{
                                    color:'#fff'}},
                            axisLabel:{
                                color:'fff',
                                textStyle: {
                                    color: '#fff'
                                }
                        }}
                    ],

                    yAxis: [
                        {

                            type: 'value',
                            axisLine:{
                                lineStyle:{
                                    color:'#fff'}},
                            axisLabel: {
                                show: true,
                                interval: 'auto',
                                formatter: '{value}',
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        }
                    ],
                    series: yaxis_series
                });

            }

        })
    }
    getData();
</script>
</body>
</html>